<template>
  <view class="event-detail">
    <image :src="activityData.image" mode="" style="width: 750rpx; height: 550rpx"></image>
    <view class="one">
      <view style="margin-left: 24rpx; font-weight: 550; font-size: 36rpx; color: #010101; line-height: 36rpx">{{
        activityData.name
      }}</view>
      <view style="margin-left: 24rpx; margin-top: 42rpx">
        <view class="time">
          <u-icon size="25" name="clock" style="margin-right: 16rpx"></u-icon>
          {{ activityData.start_time }}
        </view>
        <view class="area" @click="openLocation">
          <u-icon size="25" name="map" style="margin-right: 16rpx"></u-icon>
          {{ activityData.address }}
        </view>
        <view class="area">
          <u-icon size="25" name="order" style="margin-right: 16rpx"></u-icon>
          适合年龄{{ activityData.age_range }}岁
        </view>
        <view
          style="
            width: 702rpx;
            height: 58rpx;
            background: #f3fff7;
            border-radius: 8rpx;
            font-weight: 500;
            font-size: 26rpx;
            color: #0dc160;
            line-height: 58rpx;
          "
        >
          {{ activityData.close_regist_time }}
        </view>
      </view>
    </view>
    <view class="two">
      <view style="padding: 23rpx">
        <view style="font-weight: 550; font-size: 36rpx; color: #010101; margin-bottom: 32rpx">拼班进度</view>
        <view style="font-weight: 400; font-size: 24rpx; color: #999999; margin-bottom: 24rpx"
          >成班人数：{{ activityData.max_participants }}/人</view
        >
        <view class="circle-progress">
          <view class="circle-bg"></view>
          <view class="circle-progress-bar" :style="{ width: progress }"></view>
        </view>
        <view style="margin-bottom: 48rpx; margin-top: 40rpx">
          <view style="margin-bottom: 24rpx">已报名：{{ activityData.signup_count }}人</view>
          <view style="display: flex; justify-content: space-between">
            <view v-if="!showAllSignupUsers">
              <image
                v-for="(joinUserItem, index) in activityData.joinUser.slice(0, 20)"
                :key="index"
                :src="joinUserItem.user.avatar"
                mode=""
                style="width: 48rpx; height: 48rpx"
              ></image>
            </view>
            <view v-if="activityData.joinUser.length > 20">
              <view v-if="!showAllSignupUsers" style="font-weight: 400; font-size: 24rpx; color: #0dc160" @click="showAllSignupUsers = true"
                >展开</view
              >
              <view v-if="showAllSignupUsers" style="font-weight: 400; font-size: 24rpx; color: #0dc160" @click="showAllSignupUsers = false"
                >收起</view
              >
            </view>
          </view>
        </view>
        <view class="wgrs">
          <view style="margin-bottom: 24rpx">围观人数：{{ activityData.watch_count }}人</view>
          <view style="display: flex; justify-content: space-between">
            <view v-if="!showAllWatchUsers">
              <image
                v-for="(watchUserItem, index) in activityData.watchUser.slice(0, 20)"
                :key="index"
                :src="watchUserItem.user.avatar"
                mode=""
                style="width: 48rpx; height: 48rpx"
              ></image>
            </view>
            <view v-if="activityData.watchUser.length > 20">
              <view v-if="!showAllWatchUsers" style="font-weight: 400; font-size: 24rpx; color: #0dc160" @click="showAllWatchUsers = true"
                >展开</view
              >
              <view v-if="showAllWatchUsers" style="font-weight: 400; font-size: 24rpx; color: #0dc160" @click="showAllWatchUsers = false"
                >收起</view
              >
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="three">
      <view style="padding: 23rpx">
        <view style="font-weight: 550; font-size: 36rpx; color: #010101; margin-bottom: 32rpx">陪伴师</view>
        <view style="display: flex">
          <image :src="activityData.coach.avatar" mode="" style="width: 100rpx; height: 100rpx; margin-right: 24rpx"></image>
          <view>
            <view style="font-weight: 580; font-size: 30rpx; color: #010101; margin-bottom: 16rpx">
              {{ activityData.coach.name }}
            </view>
            <view style="font-weight: 400; font-size: 24rpx; color: #999999; margin-bottom: 10rpx">
              {{ activityData.coach.intro }}
            </view>
            <u-rate
              :disabled="true"
              :value="activityData.coach.coach_level_id"
              color="#E7E7E7"
              active-color="#FF5B00"
              style="margin-top: 10rpx"
              @change.prevent
            />
          </view>
        </view>
      </view>
    </view>
    <view class="four">
      <view style="font-weight: 550; font-size: 36rpx; color: #010101"> 课程简介 </view>
      <view
        style="
          font-weight: 400;
          font-size: 30rpx;
          color: #666666;
          width: 702rpx;
          height: 600rpx;
          margin-top: 40rpx;
          line-height: 50rpx;
          text-align: justify;
          font-style: normal;
        "
      >
        {{ activityData.description }}
      </view>
      <view>
        <image :src="activityData.image" mode="" style="width: 702rpx; height: 282rpx"></image>
      </view>
    </view>
    <view>
			<view @click="publish">发布</view>
			<view @click="join">参加</view>
      <l-fab :offset.sync="offset" axis="xy" @click="onClick">
        <view>
          <u-icon size="80" name="server-man"></u-icon>
        </view>
      </l-fab>
    </view>
  </view>
</template>

<script>
import { wxpay, alipay, ttpay } from '@/utils/pay'
import { activityDetail } from '@/api/store';
import { apiPublishActivity,apiJoinActivity } from '@/api/activity';
import { getLocation } from '@/utils/location';

export default {
  data() {
    return {
      eventId: '',
      activityData: {
        latitude: null,
        longitude: null,
      },
      offset: [200, 400],
      showAllSignupUsers: false,
      showAllWatchUsers: false,
    };
  },
  computed: {
    gradientColor() {
      return 'linear-gradient(117deg, #FCF21F 0%, #32B576 100%)';
    },
    progress() {
      return (this.activityData.signup_count / this.activityData.max_participants) * 100 + '%';
    },
  },
  onLoad(options) {
    this.eventId = options.id;
    activityDetail({ id: this.eventId } || 1)
      .then(res => {
        this.activityData = res;
        console.log(res);
        this.fetchLocation();
      })
      .catch(error => {
        console.error('请求失败:', error);
      });
  },
  methods: {
    fetchLocation() {
      getLocation()
        .then(location => {
          this.activityData.latitude = location.latitude;
          this.activityData.longitude = location.longitude;
        })
        .catch(error => {
          console.error('获取地理位置失败:', error);
        });
    },
    onClick() {
      console.log('点击了');
    },
		publish(){
			apiPublishActivity({ id: this.eventId,terminal:this.$store.state.app.client })
			.then((result) => {
			     console.log('Publish',result);
					 wxpay(result.miniPayRequest)
					     .then(async (res) => {
								 console.log('pay',res)
					         // #ifndef H5
					         
					         // #endif
					 					 
					         // #ifdef H5
					         
					         // #endif
					     })
					     .catch((errMsg) => {
								 
							 })
			   })
			.catch((error) => {
			     console.error('请求失败:', error);
			   });
		},
		join(){
			apiJoinActivity({ id: this.eventId,terminal:this.$store.state.app.client  } )
			.then((res) => {
			     console.log('Join',res);
			   })
			.catch((error) => {
			     console.error('请求失败:', error);
			   });
		},
    openLocation() {
      const { latitude, longitude, address } = this.activityData;
      if (latitude && longitude) {
        wx.openLocation({
          latitude: parseFloat(latitude),
          longitude: parseFloat(longitude),
          name: address,
          scale: 18
        });
      } else {
        console.error('地理位置未获取到');
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.circle-progress {
  position: relative;
  width: 622rpx;
  height: 16rpx;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
  overflow: hidden;
}

.circle-bg {
  width: 100%;
  height: 100%;
  background: #f4f6f9;
  z-index: 10;
}

.circle-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(117deg, #fcf21f 0%, #32b576 100%);
  border-radius: 10rpx 10rpx 10rpx 10rpx;
  transition: width 0.5s ease-in-out;
  z-index: 20;
}
.one {
  width: 750rpx;
  height: 378rpx;
  background: #ffffff;
  padding: 32rpx;
}
.two {
  margin-top: 30rpx;
  width: 750rpx;
  height: 468rpx;
  background: #ffffff;
}
.three {
  margin-top: 40rpx;
  width: 750rpx;
  height: 264rpx;
  background: #ffffff;
}
.four {
  margin-top: 30rpx;
  width: 750rpx;
  height: 1020rpx;
  background: #ffffff;
  padding: 10px;
}
.time,
.area {
  height: 24rpx;
  font-weight: 400;
  font-size: 24rpx;
  color: #999999;
  line-height: 24rpx;
  text-align: left;
  font-style: normal;
  margin-top: 16rpx;
  margin-bottom: 24rpx;
}
</style>
